<script setup lang="ts">
import guess from '@/components/guess/index.vue'
import { onShow } from '@dcloudio/uni-app';
import { computed, ref } from 'vue'
import { getCartList, cartItem, deletCart, changeCart, changeAllSelectes } from '@/apis/cart'
import { useMemberStore } from '@/store/member'
import { getLike, likeItem } from "@/apis/home";

const memberStore = useMemberStore()


// 结算
const goPay = () => {
  if (count.value === 0) return uni.showToast({ title: '请选择宝贝', icon: 'none' })
  uni.navigateTo({
    url: '/pages/order/create/index'
  })
}

const cartList = ref<cartItem[]>([])
// 获取购物车数据
const getCart = async () => {
  const res = await getCartList()
  // console.log(res, 'res');
  cartList.value = res
}

// 数据渲染
onShow(async () => {
  if (memberStore.profile.token) {
    getCart()
  }
  getList()
})

// 删除购物车数据
const deleteCartList = async (skuId: string) => {
  // console.log('shangchu');
  await deletCart([skuId])
  uni.showToast({ title: '哼 竟然把我删除了', icon: 'none' })  //提示信息
  getCart()  //重新获取数据 
}

// 修改商品数量
const reduceCount = (item: cartItem) => {
  let count = item.count
  if (item.count <= 1) return
  count--
  item.count = count
  changeCart(item.skuId, { count: item.count })
}
const increaseCount = (item: cartItem) => {
  let count = item.count
  if (item.count >= item.stock) return
  count++
  item.count = count
  changeCart(item.skuId, { count: item.count })
}

// 修改商品选中状态
const changeSelected = (item: cartItem) => {
  item.selected = !item.selected
  changeCart(item.skuId, { selected: item.selected })
}


// 全选反选选中状态
const isChecked = computed(() => {
  return cartList.value.every(item => item.selected)
})
const changeSelectedAll = () => {
  const selected = !isChecked.value
  cartList.value.forEach(item => { item.selected = selected })
  changeAllSelectes({ selected })  //调用接口
}

// 筛选出来
const newCartList = computed(() => {
  return cartList.value.filter((item) => item.selected === true)
})

// 总钱
const money = computed(() => {
  return newCartList.value.reduce((sum, v) => (sum * 100 + (v.price * v.count) * 100) / 100, 0)
})
// 总数
const count = computed(() => {
  return newCartList.value.reduce((count, v) => count + v.count, 0)
})

// 猜你喜欢   这部分需要调用多次 需要封装
const like = ref<likeItem[]>([]);
const counts = ref(0); //总条数
let page = ref(1)
const getList = async () => {
  const res = await getLike({ page: page.value, pageSize: 10 });
  like.value.push(...res.items); //追加分页数据
  counts.value = res.counts; //保存总条数数据
};
// 滚动触底事件
const onscrolltolower = () => {
  //  1 判断当前页码是否大于等于总页数
  //  2 如果否，当前页码++
  //  3 重新请求页面数据接口
  if (counts.value === like.value.length) {
    return uni.showToast({ icon: "none", title: "没有更多了" });
  }
  page.value++;
  getList(); //猜你喜欢
};
</script>

<template>
  <scroll-view scroll-y enhanced :show-scrollbar="false" class="viewport" @scrolltolower="onscrolltolower">
    <!-- 顶部工具栏 -->
    <view class="topbar" v-if="false">
      <view class="locate">顺义区后沙峪地区</view>
      <view class="extra">
        <text class="edit">编辑</text>
        <text class="menu"></text>
      </view>
    </view>

    <template v-if="memberStore.profile.token">
      <!-- 优惠提示 -->
      <view class="tips">
        <text class="label">满减</text>
        <text class="desc">满1件, 即可享受9折优惠</text>
      </view>

      <!-- 购物车商品 -->
      <view class="carts">
        <uni-swipe-action>
          <uni-swipe-action-item class="swipe-cell" v-for="(item, index) of cartList" :key="index">
            <navigator hover-class="none" :url="'/pages/goods/index?id=' + item.id" class="card">
              <text :class="[
                'checkbox',
                `icon-${item.selected ? 'checked' : 'ring'}`,
              ]" @tap.stop="changeSelected(item)"></text>
              <!-- 商品缩略图 -->
              <image class="thumb" :src="item.picture"></image>
              <view class="meta">
                <!-- 商品名称 -->
                <view class="name ellipsis">{{ item.name }}</view>
                <!-- 商品类型 -->
                <view class="type ellipsis">{{ item.attrsText }}</view>
                <!-- 价格 -->
                <view class="price"> ¥{{ item.price }} </view>
                <!-- 商品数量，阻止冒泡 -->
                <view class="quantity">
                  <text class="text" @click.stop="reduceCount(item)">-</text>
                  <input class="input" type="text" :value="item.count" />
                  <text class="text" @click.stop="increaseCount(item)">+</text>
                </view>
              </view>
            </navigator>

            <template v-slot:right>
              <view class="swipe-cell-action">
                <button class="collect-button" @click="">移入收藏</button>
                <button class="delete-button" @click="deleteCartList(item.skuId)">删除</button>
              </view>
            </template>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
    </template>

    <!-- 状态提示 -->
    <view class="blank" v-else>
      <navigator url="/pages/login/index" hover-class="none">
        <text>登后后可查看购物车中的商品</text>
        <button class="button">去登录</button>
      </navigator>

    </view>

    <!-- 猜你喜欢 -->

    <guess :source="like"></guess>
  </scroll-view>

  <!-- 吸底工具栏 -->
  <view class="toolbar" v-if="cartList.length">
    <text class="all" :class="{ checked: isChecked }" @tap="changeSelectedAll">全选</text>
    <text class="text">合计:{{ count }}</text>
    <text class="amount">{{ money.toFixed(2) }}</text>
    <!-- 操作按钮 -->
    <view class="buttons">
      <view class="button payment" :class="{ disabled: count === 0 }" @tap="goPay">去结算</view>
      <view class="button collect">移入收藏</view>
      <view class="button delete">删除</view>
    </view>
  </view>
</template>

<style>
:host {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.viewport {
  min-height: 400rpx;
  /* padding-bottom: 120rpx; */
}

/* 顶部工具栏 */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  height: 88rpx;
  padding: 0 30rpx;
  font-size: 26rpx;
  color: #262626;
  background-color: #fff;
}

.topbar .extra {
  display: flex;
  align-items: center;
  height: 24rpx;
  border-left: 1rpx solid #bfbfbf;
}

.topbar .extra .edit {
  padding: 0 30rpx;
}

.topbar .extra .menu {
  width: 9rpx;
  height: 9rpx;
  padding: 14rpx;
  border-radius: 50%;
  background-color: #262626;
  background-clip: content-box;
  position: relative;
}

.topbar .extra .menu::before,
.topbar .extra .menu::after {
  position: absolute;
  top: 50%;

  content: '';
  width: 6rpx;
  height: 4rpx;
  background-color: #8c8c8c;
  transform: translateY(-50%);
  border-radius: 4rpx;
}

.topbar .extra .menu::before {
  left: 0;
}

.topbar .extra .menu::after {
  right: 0;
}

/* 优惠提示 */
.tips {
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 30rpx;
  font-size: 26rpx;
  color: #666;
}

.tips .label {
  color: #fff;
  padding: 7rpx 15rpx 5rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
  background-color: #27ba9b;
  margin-right: 10rpx;
}

.carts {
  padding: 0 20rpx;
}

/* 购物车商品 */
.carts .card {
  display: flex;
  padding: 20rpx 20rpx 20rpx 80rpx;
  border-radius: 10rpx;
  background-color: #fff;
  position: relative;
}

.carts .swipe-cell {
  display: block;
  margin-top: 20rpx;
}

.carts .swipe-cell:first-child {
  margin-top: 0;
}

.carts .card .checkbox {
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 100%;
  font-size: 40rpx;
  color: #444;
}

.carts .card .icon-checked {
  color: #27ba9b;
}

.carts .card .thumb {
  width: 170rpx;
  height: 170rpx;
}

.carts .card .meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
}

.carts .card .name {
  height: 72rpx;
  font-size: 26rpx;
  color: #444;
}

.carts .card .type {
  line-height: 1.8;
  padding: 0 15rpx;
  font-size: 24rpx;
  align-self: flex-start;
  border-radius: 4rpx;
  color: #888;
  background-color: #f7f7f8;
}

.carts .card .price {
  line-height: 1;
  font-size: 26rpx;
  color: #444;
  margin-bottom: 2rpx;
}

.carts .card .warning {
  color: #cf4444;
  font-size: 24rpx;
}

.carts .card .quantity {
  position: absolute;
  bottom: 20rpx;
  right: 5rpx;

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 220rpx;
  height: 48rpx;
}

.carts .card .quantity .text {
  height: 100%;
  padding: 0 20rpx;
  font-size: 32rpx;
  color: #444;
}

.carts .card .quantity .input {
  height: 100%;
  text-align: center;
  border-radius: 4rpx;
  font-size: 24rpx;
  color: #444;
  background-color: #f6f6f6;
}

/* 购物车状态提示 */
.blank {
  padding: 100rpx 0 60rpx;
  text-align: center;
  color: #444;
  font-size: 26rpx;
}

.blank .button {
  width: 240rpx !important;
  height: 60rpx;
  line-height: 60rpx;
  margin-top: 25rpx;
  font-size: 26rpx;
  border-radius: 60rpx;
  color: #fff;
  background-color: #27ba9b;
}

.blank .button::after {
  display: none;
}

/* 吸底工具栏 */
.toolbar {
  position: relative;
  padding: 32rpx 20rpx 28rpx;
  border-top: 1rpx solid #ededed;
  border-bottom: 1rpx solid #ededed;
  background-color: #fff;
}

.toolbar .all {
  margin-left: 25rpx;
  font-size: 14px;
  color: #444;
}

.toolbar .all::before {
  font-family: 'erabbit' !important;
  content: '\e6cd';
  font-size: 36rpx;
  margin-right: 8rpx;
  vertical-align: -4rpx;
}

.toolbar .checked::before {
  content: '\e6cc';
  color: #27ba9b;
}

.toolbar .text {
  margin-right: 8rpx;
  margin-left: 32rpx;
  color: #444;
  font-size: 14px;
}

.toolbar .amount {
  font-size: 20px;
  color: #cf4444;
  vertical-align: -1px;
}

.toolbar .amount::before {
  content: '￥';
  font-size: 12px;
}

.toolbar .amount .decimal {
  font-size: 12px;
}

.toolbar .buttons {
  position: absolute;
  right: 10rpx;
  top: 50%;

  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 72rpx;
  font-size: 13px;
  color: #fff;
  transform: translateY(-50%);
}

.toolbar .buttons .button {
  width: 240rpx;
  margin: 0 10rpx;
  border-radius: 72rpx;
}

.toolbar .payment {
  /*display: none;*/
  background-color: #27ba9b;
}

.toolbar .disabled {
  opacity: 0.6;
}

.toolbar .delete {
  display: none;
  background-color: #27ba9b;
}

.toolbar .collect {
  display: none;
  background-color: #ffa868;
}

.swipe-cell-action {
  display: flex;
  height: 100%;
  /* flex-direction: column; */
}

.swipe-cell-action button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  padding: 6px;
  line-height: 1.5;
  color: #fff;
  font-size: 26rpx;
  border-radius: 0;
}

.swipe-cell-action .collect-button {
  background-color: #ffa868;
}

.swipe-cell-action .delete-button {
  background-color: #cf4444;
}
</style>
